<style scoped>
  .main{
    /*padding-bottom: 70px;*/
  }
  .income{
    background: #edf1f5;
  }
  .nav ul{
    display: flex;
    flex-direction: row;
    padding:8px 0;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
  }
  .nav ul li{
    flex: 1;
  }
  .nav ul li a{
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .nav ul li p{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .nav ul li:last-child p{
    color: #4D63EB;
  }
  .nav ul li:last-child p b{
    width:50%;
    height:3px;
    background: -webkit-linear-gradient(right, #91A5F8, #6379F8);
    position: absolute;
    left:25%;
    bottom:-8px;
  }
  .nav ul li h4{
    color: #e9e9e9;
  }
  .weight-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .weight-top div{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
  .weight-top div h4{
    opacity: 0.5;
  }
  .weight-top div h3{
    opacity: 0.5;
    margin-left: 4px;
  }

  /*账户详情*/
  .ziji{
    background: #ffffff;
    margin-top: 6px;
  }
  .ziji ul{
    display: flex;
    flex-direction: row;
  }
  .ziji ul li{
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin:10px 10px;
    padding: 10px 0;
  }
  .ziji ul li:first-child{
    border-right: 1px solid #e9e9e9;
  }
  .ziji ul li>div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .ziji ul >li>div p{
    color: #77CB7D;
  }
  .ziji ul li>div h3{
    margin-left: 8px;
  }
  .ziji ul li>div h2{
    color: #7460EE;
  }
  .my-table{
    display: flex;
    width: 100%;
    background: #ffffff;
    margin-top: 6px;
  }
  .my-table table{
    width: 100%;
  }
  .my-table thead{
    padding: 4px;
  }
  .my-table thead{
    border-bottom: 2px solid #e9e9e9;
  }
  .my-table thead tr th{
    color: #a4a3a9;
    padding:6px 0;
  }
  .my-table tbody tr{
    border-bottom: 1px solid #e9e9e9;
  }
  .my-table tbody tr td{
    text-align: center;
    padding: 8px 0;
  }
  .line{
    height:200px;
    overflow: hidden;
    background: #ffffff;
  }
  .echarts {
    height: 200px;
    width:100%;
  }
  /*.echarts>div:first-child{*/
  /*width:100%!important;*/
  /*}*/
  .total{
    width:100%;
    height:30px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
  @media screen and (max-width: 320px) {
    .total>h1{
      margin-left: 26px;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .total>h1{
      margin-left: 35px;
    }
  }
  @media screen and (min-width: 376px){
    .total>h1{
      margin-left: 42px;
    }
  }
  .ryn{
    display: flex;
    flex-direction: row;
    padding: 10px 36px;
    background: #ffffff;
    justify-content: space-between;
  }
  .ryn ul{
    display: flex;
    /*margin-right: 20px;*/
  }
  .ryn ul li{
    width:26px;
    height: 26px;
    border: 1px solid #82A8FF;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .ryn ul li.active{
    background: #6683ff;

  }
  .ryn ul li p{
    color: #6683ff;
  }
  .ryn ul li.active p{
    color: #ffffff;
  }
  .unChoose{
    border-color: #e9e9e9!important;
  }
  .unChoose p{
    /*background: #e9e9e9;*/
    color: #e9e9e9!important;
  }


</style>
<template>
  <v-scroller
    style="padding-top: 97px"
    height="-153px"
    v-on:reload="findDataByNetwork"
    ref="scrollBar">
  <div class="income">
    <div class="main">
    <div class="profit">
      <div class="ryn">
        <h3>账户总金额</h3>
        <ul>
          <li @click="week" v-bind:class="{active:weekActive}"><p>周</p></li>
          <li @click="month" v-bind:class="{active:monthActive,unChoose: hasMonth}"><p>月</p></li>
          <li @click="year" v-bind:class="{active:yearActive,unChoose: hasYear}"><p>年</p></li>
        </ul>
      </div>
      <div class="total">
        <h1>${{allData.total_value | toFixed}}</h1>
      </div>
      <div class="line">
        <chart :options="line2"></chart>
      </div>
      <div class="ziji">
        <ul>
          <li>
            <div>
              <p class="iconfont icon-iicon"></p>
              <h3>${{allData.total_cash | toFixed}}</h3>
            </div>
            <p>未使用资金</p>
          </li>
          <li>
            <div>
              <h2 class="iconfont icon-icons"></h2>
              <h3>${{allData.buying_power | toFixed}}</h3>
            </div>
            <p>可透资金额</p>
          </li>
        </ul>
      </div>
      <div class="my-table">
        <table align="center">
          <thead>
          <tr>
            <th>证券代码</th>
            <th @click="sortFunc('q')">份数
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.q">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.q">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('p')">市价
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.p">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.p">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('dprofit')">当日盈利
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.dprofit">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.dprofit">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('acc_profit')">累计浮盈
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.acc_profit">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.acc_profit">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="stock in allData.stocks">
            <td><p>{{stock.s}}</p></td>
            <td><p>{{stock.q}}</p></td>
            <td><p>{{stock.p | toFixed}}</p></td>
            <td><p>{{stock.dprofit | toFixed}}</p></td>
            <td><p>{{stock.acc_profit | toFixed}}</p></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    </div>
    </div>
  </v-scroller>
</template>

<script>
  import host from '../../config.js'
  import axios from 'axios'
  import ECharts from 'vue-echarts/components/ECharts.vue'
  import { sort, sortControl } from '../../plugins/sort'



  export default {
    components: {
      chart: ECharts
    },
    data () {
      return {
        line2: null,
        sortControl: {
          q: 0,
          p: 0,
          dprofit: 0,
          acc_profit: 0
        },
        triangleUp: '#icon-paixu',
        triangleDown: '#icon-paixu1',
        allData: {
          date: null,
          portfolioN: null,
          total_value: null,
          total_cash: null,
          buying_power: null,
          stocks: null
        },
        //      月周年
        weekActive: false,
        monthActive:false,
        yearActive: false,
        token: null,

        hasMonth: true,
        hasYear: true
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.$refs.scrollBar.$refs.scrollBar.donePulldown()
      })
    },
    created () {
      window.localStorage.getItem('accountData') ? this.findDataByCache() : this.findDataByNetwork()
    },
    activated () {
      window.localStorage.getItem('accountData') ? this.findDataByCache() : this.findDataByNetwork()
    },
    methods: {
      findDataByCache () {
        let that = this
        this.$plugins.cacheControl.getCache('accountData', 0.5).then((data) => {
          that.allData = data.data
          that.weekActive = true
          if (data.data.mv.length > 5) {
            that.hasMonth = false
          }
          if (tdata.data.mv.length > 22) {
            that.hasYear = false
          }
          var xdata = []
          that.line2 = {
            tooltip: {
              show: true,
              trigger: 'axis'
            },
            legend: {
              data: ['Step Start', 'Step Middle']
            },
            grid: {
              top: '4%',
              bottom: '3%'
            },
            xAxis: [
              {
                splitLine: {
                  show: false
                },
                boundaryGap: false,
                axisLabel: {
                  show: false
                },
                axisTick: false,
                axisLine: {
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8
                  }
                },
                data: xdata
              }
            ],
            yAxis: [
              {
                show: false,
                splitLine: {
//                  show: false,
                  lineStyle:{
                    color: '#e9e9e9',
                    opacity: 0.5
                  }
                }
              }
            ],
            series: [
              {
                name: '累计金额',
                type: 'line',
                areaStyle: {
                  normal: {
                    color: 'rgba(77,102,255,0.17)'
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#4D66FF'
                  }
                },
                data: []
              }
            ]
          }
          var dataLength = data.data.mv.length
          let dataLength5
          if(dataLength > 5) {
            dataLength5 = dataLength - 5
          }else {
            dataLength5 = 0
          }
          for(var j = dataLength5; j< dataLength; j++){
            that.line2.series[0].data.push((that.allData.mv[j]).toFixed(2))
          }
          for(var k = dataLength5; k< that.allData.mv.length; k++){
            xdata.push(that.allData.date[k])
          }
          that.$nextTick(() => {
            that.$refs.scrollBar.$refs.scrollBar.reset()
          })
        }).catch((error) => {
          this.findDataByNetwork()
        })
      },
      findDataByNetwork () {
        var localStorage = window.localStorage
        this.token = localStorage.getItem('token')
        let that = this
        //    页面总数据
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/accountDetail"
        }).then(function (data) {
          for (let i in that.sortControl) {
            that.sortControl[i] = 0
          }
          if(data.data.code === 6006) {
            that.$router.push('../login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200){
            that.$plugins.cacheControl.setCache('accountData', data.data.data)
            that.allData = data.data.data
            that.weekActive = true
            if (that.allData.mv.length > 5) {
              that.hasMonth = false
            }
            if (that.allData.mv.length > 22) {
              that.hasYear = false
            }
            var xdata = []
            that.line2 = {
              tooltip: {
                show: true,
                trigger: 'axis'
              },
              legend: {
                data: ['Step Start', 'Step Middle']
              },
              grid: {
                top: '4%',
                bottom: '3%'
              },
              xAxis: [
                {
                  splitLine: {
                    show: false
                  },
                  boundaryGap: false,
                  axisLabel: {
                    show: false
                  },
                  axisTick: false,
                  axisLine: {
                    lineStyle: {
                      color: '#e9e9e9',
                      opacity: 0.8
                    }
                  },
                  data: xdata
                }
              ],
              yAxis: [
                {
                  show: false,
                  splitLine: {
  //                  show: false,
                    lineStyle:{
                      color: '#e9e9e9',
                      opacity: 0.5
                    }
                  }
                }
              ],
              series: [
                {
                  name: '累计金额',
                  type: 'line',
                  areaStyle: {
                    normal: {
                      color: 'rgba(77,102,255,0.17)'
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#4D66FF'
                    }
                  },
                  data: []
                }
              ]
            }
            var dataLength = that.allData.mv.length
            let dataLength5
            if(dataLength > 5) {
              dataLength5 = dataLength - 5
            }else {
              dataLength5 = 0
            }
            for(var j = dataLength5; j< dataLength; j++){
              that.line2.series[0].data.push((that.allData.mv[j]).toFixed(2))
            }
            for(var k = dataLength5; k< that.allData.mv.length; k++){
              xdata.push(that.allData.date[k])
            }
            that.$nextTick(() => {
              that.$refs.scrollBar.$refs.scrollBar.reset()
            })
          }
        })
      },
      year () {
        if(this.hasYear) return;
        this.weekActive = false
        this.monthActive = false
        this.yearActive = true
        var xdata = []
        this.line2 = {
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          legend: {
            data: ['Step Start', 'Step Middle']
          },
          grid: {
            top: '4%',
            bottom: '3%'
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              show: false,
              splitLine: {
                show: false,
                lineStyle:{
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              }
            }
          ],
          series: [
            {
              name: '累计金额',
              type: 'line',
              areaStyle: {
                normal: {
                  color: 'rgba(77,102,255,0.17)'
                }
              },
              itemStyle: {
                normal: {
                  color: '#4D66FF'
                }
              },
              data: []
            }
          ]
        }
        for(var j = 0; j< this.allData.mv.length; j++){
          this.line2.series[0].data.push((this.allData.mv[j]).toFixed(2))
        }
        for(var k = 0; k< this.allData.mv.length; k++){
          xdata.push(this.allData.date[k])
        }
      },
      sortFunc (value) {
        Object.keys(this.sortControl).forEach((key) => {
          this.sortControl[key] = 0
        })
        this.sortControl = sortControl(this.sortControl, value)
        this.$nextTick(() => {
          this.allData.stocks = sort(this.allData.stocks, value, this.sortControl[value] === 1 ? 'sort' : 'reverse')
        })
      },
      month () {
        if(this.hasMonth) return
        this.weekActive = false
        this.monthActive = true
        this.yearActive = false
        var xdata = []
        this.line2 = {
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          legend: {
            data: ['Step Start', 'Step Middle']
          },
          grid: {
            top: '4%',
            bottom: '3%'
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              show: false,
              splitLine: {
                show: false,
                lineStyle:{
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              }
            }
          ],
          series: [
            {
              name: '累计金额',
              type: 'line',
              areaStyle: {
                normal: {
                  color: 'rgba(77,102,255,0.17)'
                }
              },
              itemStyle: {
                normal: {
                  color: '#4D66FF'
                }
              },
              data: []
            }
          ]
        }
        for(var j = 0; j< this.allData.mv.length; j++){
          this.line2.series[0].data.push((this.allData.mv[j]).toFixed(2))
        }
        for(var k = 0; k< this.allData.mv.length; k++){
          xdata.push(this.allData.date[k])
        }
      },
      week () {
        this.weekActive = true
        this.monthActive = false
        this.yearActive = false
        var xdata = []
        this.line2 = {
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          legend: {
            data: ['Step Start', 'Step Middle']
          },
          grid: {
            top: '4%',
            bottom: '3%'
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              show: false,
              splitLine: {
                show: false,
                lineStyle:{
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              }
            }
          ],
          series: [
            {
              name: '累计金额',
              type: 'line',
              areaStyle: {
                normal: {
                  color: 'rgba(77,102,255,0.17)'
                }
              },
              itemStyle: {
                normal: {
                  color: '#4D66FF'
                }
              },
              data: []
            }
          ]
        }
        var dataLength = this.allData.mv.length
        let dataLength5
        if(dataLength > 5) {
          dataLength5 = dataLength - 5
        }else {
          dataLength5 = 0
        }
        for(var j = dataLength5; j< dataLength; j++){
          this.line2.series[0].data.push((this.allData.mv[j]).toFixed(2))
        }
        for(var k = dataLength5; k< this.allData.mv.length; k++){
          xdata.push(this.allData.date[k])
        }

      }
    },
    filters: {
      percent (data) {
        if(data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return '0'
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return '0'
        }
      }
    }
  }
</script>
